<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="box-card">
        <!-- 头部内容 -->
        <div slot="header" class="clearfix">
          <el-button style="float: left" type="primary" size="small" @click="addFn">添加分类</el-button>
          <!-- 搜索框 -->
          <div style="float: right">
            <el-input placeholder="请输入关键字" class="input-with-select">
              <el-button slot="append" icon="el-icon-search" />
            </el-input>
          </div>
        </div>
        <!-- 表格部分 -->
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column
            prop="image"
            label="图片"
            width="180"
          >
            <template v-slot="{row}">
              <img v-imgErr="require('@/assets/common/bigUserHeader.png')" :src="row.image" alt="" style="width:120px">
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题" width="180" />
          <el-table-column prop="desc" label="介绍" />
          <el-table-column v-slot="{row}" label="操作">
            <el-button prop="created_at" type="primary" size="mini" @click="editFn(row.id)">编辑</el-button>
            <el-button prop="updated_at" type="danger" size="mini" @click="delFn(row.id)">删除</el-button>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-row type="flex" justify="center">
          <el-pagination
            layout="total,prev, pager, next"
            :total="total"
            :page-size="limit"
            @current-change="currentChange"
          />
        </el-row>

      </el-card>
      <!-- 新增弹窗 -->
      <AddCategories
        ref="addCategories"
        :show-dialog.sync="showDialog"
        @updateEvent="getCategoriesList"
      />
    </div>
  </div>
</template>

<script>
import { getCategories, deleteCategories } from '@/api/categories/index'
import AddCategories from './components/addCategories.vue'

export default {
  components: { AddCategories },
  data() {
    return {
      tableData: [],
      total: 0, // 总数量
      start: 0, // 页码
      limit: 3, // 每页获取的数量
      showDialog: false // 控制新增弹窗的显示隐藏
    }
  },
  created() {
  // 获取分类列表数据
    this.getCategoriesList()
  },
  methods: {
    // 编辑
    editFn(id) {
      this.showDialog = true
      console.log(78, this.$refs.addCategories)
      this.$refs.addCategories.getCategoriesById(id)
    },
    // 删除
    delFn(id) {
      this.$confirm('确定是否删除', '提示', {
        type: 'warning'
      }).then(async() => {
        // console.log('确定')
        // 调用接口
        await deleteCategories(id)
        if (this.tableData.length === 1 && this.start !== 1) {
          this.start--
        }
        // 更新列表
        this.getCategoriesList()
      }).catch(err => {
        console.log('取消', err)
      })
    },
    // 新增分类
    addFn() {
      this.showDialog = true
    },
    // 分页器
    currentChange(start) {
      // this.start = start
      // console.log(start);
      this.start = (start - 1) * this.limit

      this.getCategoriesList()
    },
    // 获取分类列表
    async getCategoriesList() {
      const res = await getCategories()
      const ret = await getCategories({
        _limit: this.limit,
        _start: this.start
      })
      this.total = res.data.length
      console.log(46, res)
      // 保存获取数据
      this.tableData = ret.data
    }
  }
}
</script>

<style>

</style>
